<template>
  <div class="login-container">
    <img src="@/assets/video/GIF.video.gif" alt="" />
    <!-- <video src="@/assets/video/1.mp4" autoplay="true"></video> -->
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <h1 class="title"></h1>
      <i class="jiaobiao iconfont"></i>
      <!-- 常规登录 -->
      <common
        :loginForm="loginForm"
        @syncLoginForm="handSyncLoginForm"
        @submit="submit"
        ref="commonLogin"
      />
      <!-- 二维码登录 -->
      <!-- <LyLogin /> -->
      <!-- 短信验证 -->
      <!-- <SmsLogin /> -->
    </el-form>
  </div>
</template>

<script>
import * as api from "@/api/users";
// import { application } from "express";
import common from "./commonLogin.vue";
import LyLogin from "./lyLogin.vue";
import SmsLogin from "./smsLogin.vue";
//校验验证码
var validateCaptcha = (rule, value, callback) => {
  var uCaptcha = /^\d{5}$/;
  if (uCaptcha.test(value)) {
    callback();
  } else {
    callback("验证码必须5位");
  }
};
//校验用户名
var validateUsername = (rule, value, callback) => {
  // 3-16位字母下划线
  var uPattern = /^[\u4e00-\u9fa5a-zA-Z0-9]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("用户名是以3-16位字母下划线");
  }
};
//校验密码
var validatePassword = (rule, value, callback) => {
  if (value.length >= 3) {
    callback();
  } else {
    callback("密码长度不低于3位");
  }
};

export default {
  components: {
    common,
    LyLogin,
    SmsLogin,
  },
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    handSyncLoginForm(newLoginForm) {
      console.log(newLoginForm);
      this.loginForm = newLoginForm;
    },
    submit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          //本地校验通过
          // alert("submit!");
          api.verifyCaptcha(this.loginForm.captcha).then(async (res) => {
            if (res.data.state) {
              //用户名通过，校验用户名和密码
              let { username, password } = this.loginForm;
              let res = await api.loginApi(username, password);
              console.log(res);
              //登录成功
              if (res.data.state) {
                this.storyageUserInfo(res.data); //存储用户信息到本地
                this.$router.push("/home"); //跳转到主页
              }
            } else {
              this.$refs["commonLogin"].getCaptcha(); //校验不通过，刷新验证码
            }
          });
        } else {
          //本地校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
    //封装一个用于储存用户信息的方法和token
    storyageUserInfo(userInfo, token, permission) {},
    //封装一个存储到本地的方法
    storage() {},
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  position: fixed;
}
.jiaobiao {
  font-size: 60px;
  color: #fff;
  position: absolute;
  opacity: 0.7;
}
</style>
